<!-- 用户信息 -->
<template>
	<view class="container">
		<view class="content" @click="handleNavTo('/pages/userinfo/index')">
			<image class="avatar" src="/static/images/index-business/default-avatar.svg" mode="aspectFill"></image>
			<view class="userinfo">
				<view class="name-box"><text class="name">鱼米之乡农资店</text> <text class="iconfont">&#xe61a;</text></view>
				<view class="authorized"><text class="iconfont">&#xe628;</text> 已认证</view>
			</view>
			<button class="change-role-btn" @click.stop="handleChangeRole()"><text class="iconfont">&#xe613;</text> 我是用户</button>
		</view>
	</view>
</template>

<script setup>
	import { useUserStore } from "@/store/user.js";
	
	const handleNavTo = (url) => {
		uni.navigateTo({
			url
		});
	}
	
	const handleChangeRole = () => {
		useUserStore().SET_TOGGLE_ROLE();
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 210rpx;
		padding: 30rpx 0 0 34rpx;
		box-sizing: border-box
	}

	.content {
		display: flex;
		align-items: center;

		.avatar {
			flex-shrink: 0;
			width: 124rpx;
			height: 124rpx;
		}

		.userinfo {
			flex-grow: 1;
			width: 0;
			padding: 0 20rpx;

			.name-box {
				display: flex;
				align-items: center;
				color: #FFFFFF;

				.name {
					font-weight: 500;
					font-size: 34rpx;
					line-height: 1.5;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.iconfont {
					flex-shrink: 0;
					font-size: 30rpx;
					margin-left: 4rpx;
				}
			}

			.authorized {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				height: 40rpx;
				font-size: 20rpx;
				color: #F44A43;
				background: #FFF2F2;
				border-radius: 20rpx;
				margin-top: 8rpx;
				padding: 0 18rpx 0 10rpx;

				.iconfont {
					font-size: 30rpx;
					color: #F44A43;
					margin-right: 8rpx;
				}
			}
		}

		.change-role-btn {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 160rpx;
			height: 54rpx;
			font-size: 22rpx;
			color: #F44A43;
			background-color: #FFF2F2;
			border-radius: 100rpx 0 0 100rpx;
			padding-left: 10rpx;
			box-sizing: border-box;
			margin-top: -10rpx;

			&:active {
				background-color: #ece0e0;
			}

			.iconfont {
				font-size: 20rpx;
				margin-right: 8rpx;
			}
		}
	}
</style>